<template>
  <div class="servo">
    <!--  标题区域  -->
    <div class="flex flex-a-c">
      <div class="servo-title colorin">伺服与电机信息</div>
      <a-button v-if="show" type="primary" icon="check-circle" @click="handleEdit">完成</a-button>
      <a-button v-else type="primary" icon="edit" @click="handleEdit">编辑</a-button>
    </div>
    <br />
    <div class="servoAdd" @click="handleAdd" v-if="show">
      <a-icon type="plus" style="color: #0eaee0" />
      <span class="colorin">添加轴</span>
    </div>
    <a-row :gutter="24">
      <a-col :xl="6" :xxl="6" v-for="(item, index) in list" :key="index">
        <div class="motor backBox">
          <!--    删除轴      -->
          <div class="closeBox" v-if="show">
            <a-icon type="close" @click="handleDelete(index)" />
          </div>
          <a-form-model :model="item" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-form-item label="轴">
              <span class="colorin" v-if="!show">{{ item.axisType || '' }}</span>
              <a-input v-else v-model="item.axisType" placeholder="请输入轴" />
            </a-form-item>
            <a-form-item label="伺服驱动编号">
              <span class="colorin" v-if="!show">{{ item.servoNumber || '' }}</span>
              <a-input v-else v-model="item.servoNumber" placeholder="请输入伺服驱动编号" />
            </a-form-item>
            <a-form-item label="伺服驱动型号">
              <span class="colorin" v-if="!show">{{ item.servoType || '' }}</span>
              <a-input v-else v-model="item.servoType" placeholder="请输入伺服驱动型号" />
            </a-form-item>
            <a-form-item label="伺服驱动版本">
              <span class="colorin" v-if="!show">{{ item.servoVersion || '' }}</span>
              <a-input v-else v-model="item.servoVersion" placeholder="请输入伺服驱动版本" />
            </a-form-item>
            <a-form-item label="电机编号">
              <span class="colorin" v-if="!show">{{ item.motorNumber || '' }}</span>
              <a-input v-else v-model="item.motorNumber" placeholder="请输入电机编号" />
            </a-form-item>
            <a-form-item label="电机型号">
              <span class="colorin" v-if="!show">{{ item.motorType || '' }}</span>
              <a-input v-else v-model="item.motorType" placeholder="请输入电机型号" />
            </a-form-item>
          </a-form-model>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import api from '@api/deviceInfo';
export default {
  name: 'ServoMotor',
  data() {
    return {
      show: false,
      list: [],
      labelCol: {
        xl: { span: 8 },
        xxl: { span: 8 },
      },
      wrapperCol: {
        xl: { span: 16 },
        xxl: { span: 16 },
      },
    };
  },
  computed: {
    macSN() {
      return this.$route.query.macsn;
    },
  },
  mounted() {
    this.getArchiveServoMotor();
  },
  methods: {
    // 轴新增
    handleAdd() {
      this.list = [...this.list, { axisType: '', macSN: this.macSN }];
    },
    // 轴删除
    handleDelete(index) {
      this.list.splice(index, 1);
    },
    // 伺服与点击信息编辑
    handleEdit() {
      if (this.show) {
        if (this.list.length > 0) {
          let arr = this.list.filter((item) => {
            return item.axisType === '';
          });
          if (arr.length > 0) {
            this.$message.error('请填写轴名称');
          } else {
            this.updateArchiveServoMotor();
          }
        }
        this.show = false;
      } else {
        this.show = true;
      }
    },
    // 伺服与电机数据修改
    async updateArchiveServoMotor() {
      let params = {
        macSN: this.macSN,
        updateServoMotorList: this.list,
      };
      const res = await api.updateArchiveServoMotor(params);
      if (res.MsgCode === 0) {
        this.$message.info(res.MsgDesc);
        await this.getArchiveServoMotor();
        this.show = false;
      } else {
        this.$message.error(res.MsgDesc);
      }
    },
    //  获取伺服与电机信息数据
    async getArchiveServoMotor() {
      const { Data: res } = await api.getArchiveServoMotor({ macSn: this.macSN });
      if (res !== '') {
        this.list = res;
      }
    },
  },
};
</script>

<style scoped lang="less">
.servo {
  font-family: Microsoft YaHei;
  .servo-title {
    font-size: 16px;
    font-weight: bold;
    color: #000000;
    margin-right: 20px;
  }
  .servoAdd {
    width: 100px;
    height: 30px;
    line-height: 30px;
    border: 1px solid #2399f1;
    background: rgba(35, 153, 241, 0.2);
    border-radius: 4px;
    color: rgba(35, 153, 241, 1);
    margin: 5px 5px 32px 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    span {
      margin-left: 5px;
    }
  }
  .motor {
    position: relative;
    background: rgba(248, 248, 248, 0.5);
    padding: 30px;
    border-radius: 10px;
    margin-bottom: 20px;
    .closeBox {
      position: absolute;
      right: 0;
      top: 0;
      width: 25px;
      height: 25px;
      line-height: 25px;
      background: #e5e5e5;
      border-radius: 0 10px;
      text-align: center;
    }
  }
}
</style>
